import React, { useState } from 'react';
import { UserOutlined } from '@ant-design/icons';
import { Layout, Menu, MenuProps } from 'antd';
import './common-menu.scss';
import { useNavigate } from 'react-router-dom';

const { Sider } = Layout;

const MenuSider: React.FC = () => {
  const [collapsed] = useState(false);
  type MenuItem = Required<MenuProps>['items'][number];

  const items: MenuItem[] = [
    {
      key: 'person-info',
      label: '个人简介',
      icon: <UserOutlined />,
    },
    {
      key: 'project-experience',
      label: '项目经历',
      icon: <UserOutlined />,
    },
  ];

  const [selectedKeys, setSelectedKeys] = useState(['person-info']);
  const navigate = useNavigate();
  const selectMenu = (e: any) => {
    setSelectedKeys([e.key]);
    navigate(`/${e.key}`);
  };
  return (
    <Sider theme="light" trigger={null} collapsible collapsed={collapsed}>
      <div className="demo-logo-vertical">一揽芳华</div>
      <Menu
        defaultSelectedKeys={selectedKeys}
        items={items}
        onClick={selectMenu}
      />
    </Sider>
  );
};
export default MenuSider;
